<template>
  <div id="all">
    <c-title :hide="false" :text="store_pageInfo?store_pageInfo.page_title:''"></c-title>
    <div v-show="!isShow">
      <loading :show="true"></loading>
    </div>

    <!-- new -->
    <div id="home_seller2" v-show="isShow && store_components.length <= 0">
      <div class="header_box flex-a-c">
        <div class="img">
          <img :src="mainInfo.store_thumb ? mainInfo.store_thumb : require('../../assets/images/loading.jpg')" :style="{ borderRadius: mainInfo.logo_style ? '0' : '50%' }" />
        </div>
        <ul class="name">
          <li>{{ mainInfo.store_name }}</li>
          <li class="tel" v-if="storeShowFun(1)">
            <a :href="telephone">店铺咨询： {{ mainInfo.store_mobile }}</a>
          </li>
        </ul>
        <div class="btn" @click="goToCrash" v-if="mainInfo.is_open_cashier == 1">
          <button type="button">优惠买单</button>
        </div>
      </div>
      <!-- 独立余额 -->

      <div class="balance flex-j-sb flex-a-c" v-if="is_open">
        <div class="balance-left" @click="toStoreBalance">
          <h3>{{ title }}</h3>
          <div class="price-cir">
            <span>{{ $i18n.t("money") }} </span>
            <span class="pric">{{ member_balance }}</span>
          </div>
        </div>
        <div class="balance-rihgt" v-if="show_button" @click="toStoreBalance('balance')">充值</div>
      </div>
      <o2o_appoinment v-if="mainInfo.store_reserve_info && mainInfo.store_reserve_info.show" :store_reserve_info="mainInfo.store_reserve_info" @update="getStoreInfo"></o2o_appoinment>
      <div class="home-content">
        <div class="home-tab">
           <van-tabs
            v-model="active"
            title-inactive-color="#00001C"
            :color="'var(--themeBaseColor)' || '#FE5E56'"
            line-width="15px"
            :ellipsis="false"
            @click="chooseTab">
            <block v-for="(item,index) in tabList" :key="index">
              <van-tab :title="item.name" ></van-tab>
            </block>
          </van-tabs>
        </div>

        <div class="shops-detail" v-if="tabName == 'store_detail'">
          <div class="shops-bg">
            <div class="detail-head "  @click.stop="descShow = true">
            <div class="detail-border">
              <div class="head-shops flex-a-c flex-j-sb">
                <div class="head-title flex-a-c">
                  <h3>详情介绍</h3>
                </div>
                <div class="head-more flex-a-c">
                  <span class="iconfont icon-icon_more11"></span>
                </div>
              </div>
              <div class="brief">{{ mainInfo.store_introduce }}</div>
            </div>

            </div>
            <div class="detail-msg">
              <div class="msg-head">
                <h3>营业时间</h3>
                <h4>{{ mainInfo.business_hours }}</h4>
              </div>
              <div class="msg-address msg-head">
                <h3>门店地址</h3>
                <div class="address-wrap flex-j-sb flex-a-c">
                  <h4>{{ mainInfo.store_address }}</h4>
                  <div class="address-icon flex-j-c flex-a-c" @click="goToAdress">
                    <span class="iconfont icon-zx_map_local"></span>
                  </div>
                </div>
              </div>
              <div class="msg-head delivery" v-if="is_open_store_delivery">
                <h3>配送范围</h3>
                <div class="delivery-price" v-if="!fun.isTextEmpty(delivery_amount)">门店配送起送价：{{ $i18n.t("money") }}{{ delivery_amount }}</div>
                <div class="delivery-desc" v-html="delivery_note"></div>
                <div style="width: 100%; height: 137px; position: relative;">
                  <delivery-map :center_path="locations" :path_list="delivery_area" :address_name="address_name" :is_custom="is_custom"></delivery-map>
                  <div class="view-larger" @click.stop="largetOn">查看大图</div>
                </div>

              </div>
            </div>
          </div>

          <div>
            <c-comment
              :commentInfo="commentList.new_comment"
              v-on:RouterTo="FromTo"
              :type="2"
              :score="commentList.average_score"
              :total="commentList.comment_total">
            </c-comment>
          </div>
          <div class="recommend-goods" v-if="get_recommend_goods.length > 0">
            <h3>推荐商品</h3>
            <div class="goods-list flex-j-sb" >
                <rectangle-goods
                  v-for="(item,index) in get_recommend_goods"
                  class="goods-item"
                  :key="index"
                  :dataItem="item"
                  @click.native="toGood(item.goods_id)"
                  :imgHeight="10.625"
                  :index="index">
                </rectangle-goods>
            </div>
          </div>
          <div class="mb-50"></div>
        </div>


      </div>
      <div class="community-box" v-if="tabName == 'store_micro'">
        <c-flow :showLoading="!isLoading" :isLoadMore="menuList[this.tabIndex].isLoadMore" @getMore="getMoreData" :list="menuList[this.tabIndex].list"></c-flow>
      </div>
      <div class="live-box" v-if="tabName == 'store_live'">
        <c-live :recordsList="menuList[this.tabIndex].list" :showtitle="false"></c-live>
      </div>
      <div class="member-box" v-if="tabName == 'store_staff'">
        <div class="member-item" v-for="(member, index) in menuList[tabIndex].list" :key="index">
          <div class="img-box" @click="toCard(member.card_id)">
            <van-image
              round
              width="3.75rem"
              height="3.75rem"
              :src="member.avatar"
            />
          </div>
          <div class="text-box" @click="toCard(member.card_id)" >
            <div class="phone-box">
              <p class="name">{{ member.realname?member.realname:'匿名用户' }}<i class="iconfont icon-icon_more11" @click="toCard(member.card_id)"></i></p>
              <div class="phone-wrap flex">
                <div class="icon-box card-weixin flex-a-c flex-j-c"  v-clipboard:copy="member.wechat" v-clipboard:success="onCopy" v-clipboard:error="onError">
                  <i class="iconfont icon-card_weixin"></i>
                  <!--<p>添加微信</p>-->
                </div>
                <a :href="'tel:' + member.phone" style="display: flex; align-self: center;">
                  <div class="icon-box flex-a-c flex-j-c">
                    <i class="iconfont icon-zx_map_tel"></i>
                    <!--<p>拨电话</p>-->
                  </div>
                </a>
              </div>
          </div>

            <p>联系方式：{{ member.phone }}</p>
            <p>微信号：{{ member.wechat || "无" }}</p>
          </div>

        </div>
        <div class="blank" v-if="menuList[tabIndex] && menuList[tabIndex].list.length <= 0">
          <img src="../../assets/images/blank.png" />
          <span>暂无信息</span>
        </div>
      </div>

      <div class="group-box" v-if="tabName == 'store_fight_groups'">
        <c-grouplist :list="menuList[this.tabIndex].list" :store_id="$route.params.store_id"></c-grouplist>
      </div>

      <div class="group-box" v-if="tabName == 'store_deposit'">
        <deposit-ladder-cell
          v-for="(item, index) in menuList[this.tabIndex].list"
          :thumb="item.bind_goods?item.bind_goods.thumb_src:''"
          :title="item.activity_name"
          :price="item.bind_goods?item.bind_goods.price:''"
          :deposit="item.deposit"
          :count="item.order_count"
          :key="index"
          :store_id="$route.params.store_id"
          :id="item.id"
        ></deposit-ladder-cell>
      </div>

      <div class="group-box" v-if="tabName == 'store_article'">
        <store_article :list="menuList[this.tabIndex].list" :store_id='this.store_id'></store_article>
      </div>

      <div 
        class="fixed-shop flex" 
        @click="goToShop" 
        :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']" 
        v-if="storeShowFun(2)">
        <div class="flex-a-c flex-j-c">
          <div class="shop-icon  flex-j-c">
            <span class="iconfont icon-dianpu1"></span>
          </div>
        </div>
        <p>进店选购</p>
      </div>
      <div class="fixed-code flex" @click="goToShop('code')" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']" v-if="show_qr_code">
        <!--style="position:relative;"-->
        <div class="flex-a-c flex-j-c" >
          <div class="code-icon">
            <span class="iconfont icon-material_goodsCode"></span>
          </div>
        </div>
        <p>分享</p>
      </div>
    </div>
    <!--new end-->

    <!--门店装修页面-->
    <div v-show="isShow && store_components.length > 0">
      <template v-for="(item, index) in store_components">
        <component
          :key="index"
          :is="item.component_key"
          :isBottom="isBottom"
          :lastIndex="lastIndex"
          :btnFlag="btnFlag"
          :id="item.id"
          :page_id="page_id"
          :component_key="item.component_key"
          :datas="item.remote_data"
          :index="index"
          :store_id="store_id"
          @refresh="refreshComponent"
          :ref="item.component_key"
        ></component>
      </template>

      <U_foot :id="id + '1'" v-if="bottom_info !== false" :diydatas="bottom_info"></U_foot>
    </div>

    <van-popup v-model="descShow" position="bottom" :style="{ height: '88%' }"  round >
      <div class="introduce">
        <div class="introduce-head flex-a-c flex-j-sb">
          <h3>详情介绍</h3>
          <div class="introduce-down  flex-a-c" @click.stop="descShow = false">
            <span class="iconfont icon-guanbi"></span>
          </div>

        </div>
        <div class="introduce-content">
          <p v-if="!infoShow" >暂无详情...</p>
          <p id="store_content" v-if="infoShow" v-html="info"></p>
        </div>
        <div style="height: 3.5rem;"></div>

      </div>
    </van-popup>

    <van-popup v-model="mapShow" @opened="largetOpen" position="bottom" :style="{ height: '70%' }"  round >
      <div class="introduce">
        <div class="introduce-head flex-a-c flex-j-sb">
          <h3>配送范围</h3>
          <div class="introduce-down  flex-a-c" @click.stop="mapShow = false">
            <span class="iconfont icon-guanbi"></span>
          </div>
        </div>
        <div class="map-content" style="width: 100%; height: 433px; position: relative;"  >
          <delivery-map  nameMap="del-map"  ref="delivery":center_path="locations" :path_list="delivery_area" :address_name="address_name" :is_custom="is_custom"></delivery-map>
        </div>
        <div style="height: 3.5rem;"></div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import home from "./home_seller_controller";

export default home;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

.mb-50 {
  height: 3.125rem;
  clear: both;
}
.introduce-content {
  // height: 31.25rem;
  // overflow: hidden;
  // overflow-y: scroll; /* 添加垂直滚动条 */

}

.circleBox {
  width: 100%;
  height: 7.19rem;
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/independenceBalance.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .circleLeft {
    margin-left: 2.03rem;
    color: #ffd772;
    font-size: 0.84rem;
    text-align: left;

    .priceCir {
      margin-top: 0.5rem;
      margin-bottom: 0.8rem;
      font-size: 0.84rem;

      .pric {
        font-size: 1.75rem;
      }
    }
  }
  .circleRight {
    width: 4.38rem;
    height: 1.56rem;
    background-color: #f6db97;
    border-radius: 0.78rem;
    font-size: 0.84rem;
    color: #494247;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2.03rem;
  }
}

.balance {
  // background: linear-gradient( 142deg, #393848 0%, #171821 100%);
  background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/independenceBalance(1).png') center center no-repeat;
  background-size: cover;
  border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
  border: 0.0625rem solid #FFFFFF;
  padding:1.1875rem 0.9375rem;
  margin:0 0.75rem;
  .balance-left {
    h3 {
      font-size: 0.8125rem;
      line-height: 0.8125rem;
      color: #C89273;
      padding:0 0 0.375rem 0;
      text-align: left;
    }
    .price-cir {
      span {
        font-size: 0.75rem;
        color: #FFC7AA;
        font-weight: bold;
      }
      .pric {
        font-size: 1.25rem;
      }
    }
  }
  .balance-rihgt {
    background: linear-gradient( 115deg, #F3E8E0 0%, #F6B593 100%);
    border-radius: 1.125rem 1.125rem 1.125rem 1.125rem;
    font-weight: bold;
    font-size: 0.9375rem;
    line-height: 0.9375rem;
    color: #4E3019;
    padding:0.5625rem 1.0625rem;
  }
}
.home-tab ::v-deep .van-tabs__line {
  bottom:1.1875rem;
}
.home-tab ::v-deep  .van-tab--active {
  font-weight: bold;
  font-size:16px;
}
.home-tab ::v-deep .van-tabs__nav {
  background-color: transparent!important;;
}
.home-content {
  margin:0 0.75rem;
}
//新的样式
.shops-detail {
  margin:0.375rem 0 0 0;
  border-radius: 8px 8px 0px 0px;
  // background-color: #fff;
  // padding:1px 2px 0 2px;
}
.shops-bg {
  border-radius: 8px 8px;
  background-color: #fff;
  padding:1px 2px 0 2px;
  // box-shadow: 0 0 5px rgba(250,0,0,0.5);

}
.detail-head {
  background: linear-gradient( 180deg, #EEF3F8 0%, #FFFFFF 100%);
  border-radius: 8px 8px 0px 0px;
  padding:18px 15px 0px 13px;

}
.detail-head .detail-border {
  border-bottom:1px solid #e6e6e6;
  padding:0 0 15px 0;
}
.detail-head .head-shops {
  padding:0 0 0.5rem 0;
}
.head-title .icon-dianpu {
  font-weight: 500;
}
.head-title h3 {
  font-weight: bold;
  font-size: 13px;
  color: #00001C;
  // padding:0 0 0 0.3125rem;
}
.head-more h4 {
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  color: #6E6E79;
  padding:0 0.3125rem 0 0;
  font-weight: 400;
}
.head-more .icon-icon_more11 {
 font-size: 0.75rem;
 color:#AAAAB3;
}
.brief {
  font-weight: 400;
  font-size: 13px;
  color: #6E6E79;
  text-align: left;
}

.detail-msg {
  background: #FFFFFF;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  padding:1rem 0.75rem 0.75rem 0.75rem;
  // margin-top:-2.125rem;
}
.detail-msg .msg-head {
  text-align: left;
  padding:0 0 0.875rem 0;
}
.msg-head h3 {
  font-weight: bold;
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  color: #00001C;
  padding:0 0 0.5rem 0;
}
.msg-head h4 {
  width:80%;
  font-size: 0.8125rem;
  color: #6E6E79;
  font-weight: 400;
}
.address-icon {
  width: 1.5rem;
  height: 1.5rem;
  background: #F0F0F1;
  border-radius: 50%;
}
.address-icon .icon-zx_map_local {
  font-size: 0.75rem;
}
.detail-msg .delivery {
  padding:0;
}
.delivery .delivery-price {
  font-weight: 400;
  font-size: 0.8125rem;
  color: #00001C;
}
.delivery .delivery-desc {
  font-size: 0.8125rem;
  color: #6E6E79;
  line-height: 1.125rem;
  padding:0.625rem 0 0.625rem 0;
}

.fixed-shop {
  position: fixed;
  flex-direction: column;
  right:0.5rem;
  bottom:30%;
  z-index: 9;
}

.fixed-shop .shop-icon {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  background: #F15353;
  border-radius: 50%;
  box-shadow: 0rem 0.0625rem 0.25rem 0.0625rem rgba(145,145,145,0.28);
  line-height: 0.875rem;
}
.shop-icon .icon-dianpu1{
  color: #fff;
  font-size: 1.125rem;
  line-height: 2.125rem;
}
.fixed-shop p{
  font-size: 0.5625rem;
  line-height: 0.5625rem;
  background: #FFFFFF;
  color: #3B3B4A;
  border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  border: 0.0625rem solid #F0F0F1;
  padding:0.25rem 0.3125rem;
  position: relative;
  top:-0.4375rem;
}
.fixed-code {
  position: fixed;
  flex-direction: column;
  right: 0.625rem;
  bottom:20%;
  z-index: 9;
}
.fixed-code .code-icon {
  background: #FFFFFF;
  // padding:0.8125rem 0.9375rem 0.9375rem 0.9375rem;
  padding:11px 11px 9px 11px;
  // display: inline-block;
  position: relative;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  box-shadow: 0rem 0.0625rem 0.25rem 0.0625rem rgba(145,145,145,0.28);

}
.fixed-code p {
  font-size: 0.5625rem;
  line-height: 18px;
  background: #FFFFFF;
  color: #3B3B4A;
  border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  border: 0.0625rem solid #F0F0F1;
  width: 48px;
  text-align: center;
  position: relative;
  top:-8px;
}
.icon-material_goodsCode {
  font-weight: 600;
  font-size: 1.125rem;
}

.recommend-goods {
  margin:0.9375rem 0 0 0;
  width: 100%;
}
.recommend-goods h3 {
  font-weight: bold;
  font-size: 1rem;
  line-height: 1rem;
  color: #00001C;
  padding:0  0 0.8125rem 0;
  text-align: left;
}
.recommend-goods .goods-list {
  position: relative;
  width: 100%;
  flex-wrap: wrap;
}
.goods-item {
  width:calc(50% - 0.3125rem);
  margin:0 0 0.625rem 0;
  background-color: #fff;
  border-radius: 0.75rem;
}

.introduce {
  padding:1.25rem 0.9375rem 0.9375rem 0.9375rem;
}
.introduce-head {
  padding:0 0 1.25rem 0;
}
.introduce-head h3{
  font-weight: bold;
  font-size: 1.125rem;
  color: #00001C;
  text-align: left;
}
.introduce-head .introduce-down {
  padding:0.5rem 0.5rem;
  background: #F0F0F1;
  border-radius: 50%;
}
.introduce-down .icon-guanbi {
  font-size: 0.75rem;
}

#all {
  background: #fff;
  position: relative;
}

.border-bottom {
  position: relative;
  border-top: none !important;
}

.border-bottom::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.0625rem;
  background-color: #ccc;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-bottom::after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .border-bottom::after {
    -webkit-transform: scaleY(0.33);
    transform: scaleY(0.33);
  }
}

#home_seller2 {
  background: linear-gradient( 180deg, #FFFFFF 0%,#FFFFFF 130px,#F5F5F5 152px, #F5F5F5 100%);
  .header_box {
    width: 100%;
    display: flex;
    padding:1.25rem 0.75rem;
    margin: 0 auto;
    position: relative;

    .img {
      flex: 0 0 3.5rem;
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 0.125rem;
      overflow: hidden;
      margin-right: 0.75rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .name {
      flex: 1;

      li {
        font-size: 1.125rem;
        font-weight: bold;
        line-height: 1.125rem;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 13rem;
      }

      .tel {
        font-size: 0.8125rem;
        padding:0.4375rem 0 0 0;
        color: #6E6E79;
      }
    }

    .btn {
      flex: 0 0 5.3125rem;
      display: flex;

      button {
        align-self: center;
        justify-self: center;
        border-radius: 1.125rem 1.125rem 1.125rem 1.125rem;
        font-size: 0.8125rem;
        line-height: 0.8125rem;
        border: solid 1px var(--themeBaseColor);
        color: var(--themeBaseColor);
        padding: 0.625rem 0.6875rem;
      }
    }
  }

  .tab-box {
    padding: 0.5rem 0.8rem;
    display: flex;
    flex-wrap: wrap;

    li {
      padding: 0.2rem 0.5rem;
      color: #999;
      margin: 0 0.5rem 0.3rem 0;
      font-weight: bold;
    }

    .choose {
      background-image: linear-gradient(#ff2c29, #ff2c29), linear-gradient(#ff7747, #ff7747);
      color: #fff;
      border-radius: 0.875rem;
    }
  }

  .detail-box {
    padding: 0.5rem 0.8rem;
    text-align: left;

    .detail-item {
      margin-bottom: 0.5rem;

      .delivery_amount {
        margin-left: 0.5rem;
        color: #ed0606;
        font-weight: 400;
      }
    }

    .detail-title {
      flex: 1;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .icon-all_daohang {
      flex: 0 0 1rem;
      font-size: 26px;
      color: #ff2c29;
    }

    .time {
      font-weight: bold;
      font-size: 16px;
      color: #ff2c29;
    }
  }

  .goods-box {
    display: flex;
    flex-wrap: wrap;

    .good-item {
      width: 48.5%;
      margin-bottom: 0.5rem;
      font-size: 15px;

      .good-img {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        position: relative;
        border-radius: 5px;

        img {
          width: 100%;
          height: 100%;
          right: 0;
          position: absolute;
          border-radius: 5px;
        }
      }

      .good-title {
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .good-price {
        color: #ff2c29;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* 门店拼团 */
      .show_price_box {
        display: flex;
        flex-wrap: wrap;
      }

      .show_price {
        font-size: 12px;
        color: #ff2c29;
        border: solid #ff2c29 1px;
        padding: 1px 4px;
        margin-top: 5px;
      }

      .red_white {
        color: #fff;
        background: #ff2c29;
        margin-right: 5px;
      }

      .white_red {
        color: #ff2c29;
        background: #fff;
      }

      /* 门店拼团 */
    }

    .good-item:nth-child(odd) {
      margin: 0 0.5rem 0.5rem 0;
    }
  }

  .live-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 0.8rem;

    .live-item {
      width: 48.5%;
      margin-bottom: 0.5rem;
      position: relative;
      padding-bottom: 1rem;

      .live-img-box {
        position: relative;
        width: 100%;
        height: 12rem;
        color: #fff;

        img {
          width: 100%;
          height: 100%;
          border-radius: 12px;
        }

        .left-top {
          position: absolute;
          left: 0.5rem;
          top: 0.5rem;
          font-size: 12px;

          .status {
            background: #ff2c29;
            border-radius: 5px;
            padding: 2px 3px;
          }

          .gray {
            background: #999;
          }
        }

        .right-top {
          position: absolute;
          top: 0.3rem;
          right: 1rem;

          .icon-zb_goods {
            font-size: 28px;
            color: #ffa303;
          }

          .goods-num {
            position: absolute;
            top: 3px;
            right: -10px;
            font-size: 10px;
            color: #ff2c29;
            background: #fff;
            border-radius: 9px;
            padding: 1px 2px;
          }
        }

        .bottom-title {
          position: absolute;
          bottom: 1rem;
          left: 0.5rem;
          text-align: left;
          display: -webkit-box;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .title-box {
        width: 80%;
        position: absolute;
        bottom: 0;
        right: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .member-img {
        width: 1.75rem;
        height: 1.75rem;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        bottom: 0;
        left: 0;

        img {
          margin-top: 0.12rem;
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 50%;
        }
      }
    }

    .live-item:nth-child(odd) {
      margin: 0 0.5rem 0.5rem 0;
    }
  }

  .member-box {
    padding: 0.3125rem 0.75rem;

    .member-item {
      display: flex;
      // border-bottom: 0.0625rem solid #eee;
      padding:0.75rem ;
      background-color: #fff;
      border-radius: 0.75rem;
      margin:0 0 0.625rem 0;
      .img-box {
        flex: 0 0 3.75rem;
        width: 3.75rem;
        height: 3.75rem;
      }

      .text-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-left: 0.625rem;
        font-size: 0.75rem;
        color: #3B3B4A;
        p {
          &:last-child {
            padding:0.25rem 0 0  0;
          }
        }
        .name {
          font-weight: bold;
          font-size: 1rem;
          color: #00001C;
          line-height: 1.125rem;

          .icon-icon_more11 {
            font-size: 0.875rem;
            color:#AAAAB3;
            padding:0 0 0 0.125rem;
          }
        }
      }
      .phone-wrap {
        // padding:0 43px 0 0;
        margin-right: 2.6875rem;
      }
      .phone-box {
        display: flex;
        // padding:0 0 4px 0;
        font-size: 0.75rem;
        align-items: center;
        justify-content: space-between;
        .icon-box {
          align-items: center;
          display: flex;
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 50%;
        }
        .icon-box:nth-child(1) {
          background: #D9F5E7;
          margin:0 1.25rem 0 0;
        }
        .icon-box:last-child {
          background: #E2ECFE;
          margin:0;
        }
        .icon-card_weixin {
          color:#10C86C;
          font-size: 1.125rem;
        }
        .icon-zx_map_tel {
          color: #1961F1;
          font-size: 0.875rem;
        }

      }
    }
  }
  .view-larger {
    font-weight: 400;
    font-size: 0.8125rem;
    color: #FFFFFF;
    line-height: 0.8125rem;
    padding:0.5rem 0.8125rem;
    border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left:50%;
    bottom:0.4375rem;
    transform: translate(-50%);
    z-index: 95;
  }

  .fixed-box {
    position: fixed;
    bottom:20%;
    right: 0;
    background: #ffca9b;
    width: 56px;
    height: 44px;
    border-radius: 20px 0 0 20px;

    .red-box {
      font-size: 12px;
      display: inline-block;
      padding: 3px;
      margin-top: 2px;
      margin-left: -8px;
      width: 40px;
      height: 40px;
      background: #ff2c29;
      color: #fff;
      border-radius: 50%;
    }
  }
}
.pcStyle  .fixed-shop  {
  right:41%;
  bottom:30%;
}
.pcStyle  .fixed-code  {
  right:40.5%;
  bottom:20%;
}

#store_content {
  ::v-deep img {
    height: auto;
    display: flex;
  }
}
</style>
